<template>
    <div class="content">
        <levelbar></levelbar>
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form ref="form" :model="form" label-width="80px" slot="form">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="打卡日期">
                            <el-date-picker :clearable="false" style="width:100%" :editable="false" v-model="form.startDate" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="教师姓名">
                            <el-input v-model="form.teacherName" placeholder="请输入教师姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="考勤卡号">
                            <el-input v-model="form.cardNum" placeholder="请输入考勤卡号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <!-- <div class="table-title" slot="table-title"></div> -->
            <div class="btnPosition">
              <el-button @click="upSubmit">导出</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%" v-loading="loading" ref="multipleTable" v-if="tableVisiable">
                <el-table-column align="center" label="教师姓名">
                  <template scope="scope">
                    {{!scope.row.teacherName ? '--' : scope.row.teacherName}}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="考勤卡号">
                  <template scope="scope">
                    {{!scope.row.cardNum ? '--' : scope.row.cardNum}}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="日期">
                  <template scope="scope">
                    {{!scope.row.searchDate ? '--' : scope.row.searchDate}}
                  </template>
                </el-table-column>
                <!-- :render-header="renderHeader" -->
                <el-table-column align="center" label="" :render-header="renderTimeOne" v-if="tableOne">
                    <el-table-column  align="center" label="签到时间" >
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[0] ? '--' : !scope.row.eduTeacherCheckinfoTimes[0].checkinTime ? '--' : scope.row.eduTeacherCheckinfoTimes[0].checkinTime.substring(0,5)}}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态">
                      <template scope="scope">
                        <!-- 0:正常;1:迟到;2:早退;-1:缺卡-2未绑卡 -->
                        {{!scope.row.eduTeacherCheckinfoTimes[0] ? '--' : scope.row.eduTeacherCheckinfoTimes[0].checkinStatus == 0 ? '正常' : scope.row.eduTeacherCheckinfoTimes[0].checkinStatus == 1 ? '迟到' : scope.row.eduTeacherCheckinfoTimes[0].checkinStatus == 2 ? '早退' :  scope.row.eduTeacherCheckinfoTimes[0].checkinStatus == -1 ? '缺卡':scope.row.eduTeacherCheckinfoTimes[0].checkinStatus == -2 ? '未绑卡':'--'}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="checkoutTime" align="center" label="签退时间">
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[0] ? '--' : !scope.row.eduTeacherCheckinfoTimes[0].checkoutTime ? '--' : scope.row.eduTeacherCheckinfoTimes[0].checkoutTime.substring(0,5)}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="checkoutStatus" align="center" label="状态">
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[0] ? '--' : scope.row.eduTeacherCheckinfoTimes[0].checkoutStatus == 0 ? '正常' : scope.row.eduTeacherCheckinfoTimes[0].checkoutStatus == 1 ? '迟到' : scope.row.eduTeacherCheckinfoTimes[0].checkoutStatus == 2 ? '早退' :  scope.row.eduTeacherCheckinfoTimes[0].checkoutStatus == -1 ? '缺卡':scope.row.eduTeacherCheckinfoTimes[0].checkoutStatus == -2 ? '未绑卡':'--'}}
                      </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="" :render-header="renderTimeTwo" v-if="tableTwo">
                    <el-table-column  align="center" label="签到时间">
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[1] ? '--' : !scope.row.eduTeacherCheckinfoTimes[1].checkinTime ? '--' : scope.row.eduTeacherCheckinfoTimes[1].checkinTime.substring(0,5)}}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态">
                      <template scope="scope">
                        <!-- 0:正常;1:迟到;2:早退;-1:缺卡-2未绑卡 -->
                        {{!scope.row.eduTeacherCheckinfoTimes[1] ? '--' :scope.row.eduTeacherCheckinfoTimes[1].checkinStatus == 0 ? '正常' : scope.row.eduTeacherCheckinfoTimes[1].checkinStatus == 1 ? '迟到' : scope.row.eduTeacherCheckinfoTimes[1].checkinStatus == 2 ? '早退' :  scope.row.eduTeacherCheckinfoTimes[1].checkinStatus == -1 ? '缺卡':scope.row.eduTeacherCheckinfoTimes[1].checkinStatus == -2 ? '未绑卡':'--'}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="checkoutTime" align="center" label="签退时间">
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[1] ? '--' : !scope.row.eduTeacherCheckinfoTimes[1].checkoutTime ? '--' : scope.row.eduTeacherCheckinfoTimes[1].checkoutTime.substring(0,5)}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="checkoutStatus" align="center" label="状态">
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[1] ? "--" :scope.row.eduTeacherCheckinfoTimes[1].checkoutStatus == 0 ? '正常' : scope.row.eduTeacherCheckinfoTimes[1].checkoutStatus == 1 ? '迟到' : scope.row.eduTeacherCheckinfoTimes[1].checkoutStatus == 2 ? '早退' :  scope.row.eduTeacherCheckinfoTimes[1].checkoutStatus == -1 ? '缺卡':scope.row.eduTeacherCheckinfoTimes[1].checkoutStatus == -2 ? '未绑卡':'--'}}
                      </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="" :render-header="renderTimeThree" v-if="tableThree">
                    <el-table-column align="center" label="签到时间" >
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[2] ? '--' :  !scope.row.eduTeacherCheckinfoTimes[2].checkinTime ? '--' : scope.row.eduTeacherCheckinfoTimes[2].checkinTime.substring(0,5)}}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态">
                      <template scope="scope">
                        <!-- 0:正常;1:迟到;2:早退;-1:缺卡-2未绑卡 -->
                        {{!scope.row.eduTeacherCheckinfoTimes[2] ? '--' : scope.row.eduTeacherCheckinfoTimes[2].checkinStatus == 0 ? '正常' : scope.row.eduTeacherCheckinfoTimes[2].checkinStatus == 1 ? '迟到' : scope.row.eduTeacherCheckinfoTimes[2].checkinStatus == 2 ? '早退' :  scope.row.eduTeacherCheckinfoTimes[2].checkinStatus == -1 ? '缺卡':scope.row.eduTeacherCheckinfoTimes[2].checkinStatus == -2 ? '未绑卡':'--'}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="checkoutTime" align="center" label="签退时间">
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[2] ? '--' : !scope.row.eduTeacherCheckinfoTimes[2].checkoutTime ? '--' : scope.row.eduTeacherCheckinfoTimes[2].checkoutTime.substring(0,5)}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="checkoutStatus" align="center" label="状态">
                      <template scope="scope">
                        {{!scope.row.eduTeacherCheckinfoTimes[2] ? '--' : scope.row.eduTeacherCheckinfoTimes[2].checkoutStatus == 0 ? '正常' : scope.row.eduTeacherCheckinfoTimes[2].checkoutStatus == 1 ? '迟到' : scope.row.eduTeacherCheckinfoTimes[2].checkoutStatus == 2 ? '早退' :  scope.row.eduTeacherCheckinfoTimes[2].checkoutStatus == -1 ? '缺卡':scope.row.eduTeacherCheckinfoTimes[2].checkoutStatus == -2 ? '未绑卡':'--'}}
                      </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import { mapState, mapActions, mapGetters } from 'vuex';
import { pageTeacherCheckinfo, findSchoolFirstAttendance } from 'api/attendanceManage';
export default {
    name: 'studentsAttendance',
    components: {
        Levelbar,
        TableLayout,
        startDate,
        endDate
    },
    data() {
        return {
            pickerOptions1: {
                disabledDate: time => {
                    let attendanceTime = this.attentiem - 3600 * 1000 *24;
                    if (attendanceTime) {
                        return time.getTime() < attendanceTime || time.getTime() > Date.now();
                    }
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick: picker => {
                            if (new Date() > this.attentiem) {
                                picker.$emit('pick', new Date());
                            } else {
                                this.$message('该时间段考勤记录尚未生成');
                            }
                        }
                    },
                    {
                        text: '昨天',
                        onClick: picker => {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            if (date> this.attentiem) {
                                picker.$emit('pick', date);
                            } else {
                                picker.$emit('pick', new Date());
                                this.$message('该时间段考勤记录尚未生成');
                            }
                        }
                    },
                    {
                        text: '一周前',
                        onClick: picker => {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            if (date > this.attentiem) {
                                picker.$emit('pick', date);
                            } else {
                                picker.$emit('pick', new Date());
                                this.$message('该时间段考勤记录尚未生成');
                            }
                        }
                    }
                ]
            },
            form: {
                teacherName: '', // 学生姓名
                startDate: '', // 打卡日期
                cardNum: '' // 考勤卡好
            },
            timeout: null, // 开启定时器
            tableData: [],
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            loading: false,
            renderTimeOneNum: '',
            renderTimeTwoNum: '',
            renderTimeThreeNum: '',
            tableThree: false,
            tableTwo: false,
            tableOne: false,
            tableVisiable: true,
            attendanceTime: null, // 开通时间
            attentiem: null
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['schoolId', 'token', 'cardIsOpen'])
    },
    created() {
        
        if (this.cardIsOpen == 1) {
            this.getTime();
        } else {
            this.$message('该服务未开通！');
            this.renderTimeOneNum = '该时间段考勤记录尚未生成';
            this.renderTimeTwoNum = '该时间段考勤记录尚未生成';
            this.renderTimeThreeNum = '该时间段考勤记录尚未生成';
        }
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
    // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        getTime() {
            findSchoolFirstAttendance(this.schoolId, '0').then(data => {
                if (data.data.content) {
                    this.attendanceTime = data.data.content.attendanceTime;
                    this.attentiem = new Date(this.attendanceTime).getTime();
                    //console.log(this.attendanceTime, '赋值');
                }
            }).then(() => {
                this.initDate();
            }).then(() => {
                if (this.attendanceTime) {
                    this.searchFetchData();
                }
            }).catch(Error => {
                //console.log('没有设置时间');
            })
        },

    // 设置初始时间
        initDate() {
            // const end = new Date();
            const start = new Date();
            start.setTime(start.getTime());
            this.form.startDate = start;
        },
    // 返回年月日时分秒
        fifterDate(date) {
            if (typeof date === 'string') {
                return date;
            } else {
                let month = this.addZero(date.getMonth() + 1 + '');
                let day = this.addZero(date.getDate() + '');
                return `${date.getFullYear()}-${month}-${day} 00:00:00`;
            }
        },
    // 补0
        addZero(str) {
            if (typeof str === 'string') {
                return str.length > 1 ? str : '0' + str;
            }
        },
        tableShow() {
            this.tableVisiable = false;
            this.$nextTick(() => {
                this.tableVisiable = true;
            });
        },
        searchFetchData() {
            this.loading = true;
            pageTeacherCheckinfo(
        this.fifterDate(this.form.startDate),
        this.schoolId,
        this.form.teacherName,
        this.form.cardNum,
        this.listQuery.page,
        this.config.pageSize
      )
        .then(data => {
            this.loading = false;
            this.tableData = data.data.content.pageResult.list;
            this.listQuery.total = data.data.content.pageResult.pagination.total;

            let OneNum = data.data.content.attendanceTimes[0];
            let TwoNum = data.data.content.attendanceTimes[1];
            let ThreeNum = data.data.content.attendanceTimes[2];

            if (!OneNum) {
                this.renderTimeOneNum = '该时间段考勤记录尚未生成';
                this.tableOne = false;
                this.tableShow();
            } else {
                this.renderTimeOneNum = `时间段一(${OneNum.classStartTime}-${
              data.data.content.attendanceTimes[0].classEndTime
            })`;
                this.tableOne = true;
                this.tableShow();
            }

            if (!TwoNum) {
                this.renderTimeTwoNum = '该时间段考勤记录尚未生成';
                this.tableTwo = false;
                this.tableShow();
            } else {
                this.renderTimeTwoNum = `时间段二(${TwoNum.classStartTime}-${
              data.data.content.attendanceTimes[1].classEndTime
            })`;
                this.tableTwo = true;
                this.tableShow();
            }

            if (!ThreeNum) {
                this.renderTimeThreeNum = '该时间段考勤记录尚未生成';
                this.tableThree = false;
                this.tableShow();
            } else {
                this.renderTimeThreeNum = `时间段三(${ThreeNum.classStartTime}-${
              data.data.content.attendanceTimes[2].classEndTime
            })`;
                this.tableThree = true;
                this.tableShow();
            }
        })
        .catch(Error => {
            this.loading = false;
            this.tableData = [];
            this.listQuery.total = 0;
            this.tableOne = true;
            this.tableTwo = true;
            this.tableThree = true;
            this.tableShow();
            this.renderTimeOneNum = '该时间段考勤记录尚未生成';
            this.renderTimeTwoNum = '该时间段考勤记录尚未生成';
            this.renderTimeThreeNum = '该时间段考勤记录尚未生成';
        });
        },
    // 改变时间
        renderTimeThree(createElement, { column }) {
            return (column.label = this.renderTimeThreeNum);
        },
        renderTimeTwo(createElement, { column }) {
            return (column.label = this.renderTimeTwoNum);
        },
        renderTimeOne(createElement, { column }) {
            return (column.label = this.renderTimeOneNum);
        },
        onSubmit() {
            if (this.cardIsOpen == 1) {
                this.listQuery.page = 1;
                this.searchFetchData();
            } else {
                this.$message('该服务未开通！');
            }
        },
        upSubmit() {
            let token = this.token,
                schoolId = this.schoolId,
                searchDate = this.fifterDate(this.form.startDate),
                cardNum = this.form.cardNum,
                teacherName = this.form.teacherName;
            if (this.listQuery.total !== 0) {
                window.location.href = `${
          LOCAL_API.ly
        }/checkinfo/exportTeacherCheckinfo?token=${token}&schoolId=${schoolId}&searchDate=${searchDate}&cardNum=${cardNum}&teacherName=${teacherName}`;
            } else {
                this.$message.warning('无数据，无法导出！');
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  .el-tag {
    margin-left: 5px;
    background: #f9f9f9;
    color: #444;
  }
  .formBtn {
    width: 100%;
    height: 70px;
    border-top: 1px solid #dddddd;
    position: relative;
  }
  .btnPosition {
    padding: 13px 0;
    float: left;
  }
  .footer {
    text-align: center;
    margin-top: 40px;
  }
  .footer .el-button {
    padding: 10px 40px;
  }
}
</style>